<template>
	<view class="limit-goods">
		<view class="panel c-flex c-item-center">
			<image class="select" @tap='seleGood()' v-if="goods.selected" :src="imgUrl+'sele-Icon.png'"></image>
			<image class="select"  @tap='seleGood()' v-if="!goods.selected" :src="imgUrl+'unsele-Icon.png'"></image>
			<view class="goodImg c-flex">
				<image :src="goods.lpgSkuEntity.pic"></image>
			</view>
			<view class="goodInfo">
				<view class="g-1">
					{{goods.lpgSkuEntity.name}}
					
				</view>
				<view class="g-2 c-flex">
					<view>{{goods.lpgSkuEntity.type ===0?'民用':goods.lpgSkuEntity.type ===1?'商业':'工业'}}</view>
					<view>|</view>
					<view>{{goods.lpgSkuEntity.subTitle || '测试'}}</view>
				</view>
				<view class="g-3 c-flex jc-between">
					<view>{{goods.lpgSkuEntity.price}}<text>元/瓶</text></view>
					<count style="margin-right: 15rpx;" :goodItem='goods' :refreshCount='refreshCountBool' :saleCount='goods.saleCount' btnType="2"></count>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	//import util from '@/utils/util.js';
	
	import count from '@/components/addCart/count.vue'
	
export default {
	nmae: 'cartGoods',
	props: {
		
		goodItem: {
			type: Object,
			default: () => {
				return {};
			}
		},
		refreshCount: {
			type: Boolean,
			default: true,
		}
		
	},
	components:{
		count
	},
	watch: {
		refreshCount: {
			immediate: true,
			handler: function (val) {
				if (val) {
					this.refreshCountBool = false;
					console.log('cartGoods refreshCount:',val)
					this.goods = this.goodItem;
					
				}
			}
		},
		goodItem: {
			immediate: true,
			handler: function (val) {
				if (val) {
					
					console.log('cartGoods:',val)
					this.goods = val;
					
				}
			}
		}
	},
	data() {
		return {
			imgUrl: this.$API.IMG_URL + '/liquefied-mall/common/',
			recommend:'recommend',
			isBool:false,
			goods:null,
			refreshCountBool:false
		};
	},
	mounted() {
		//this.refreshCountBool= this.refreshCount;
		this.goods = this.goodItem;
		
		
		console.log('goods:',this.goods)
		if(this.type == 2) {
			const sysInfo = uni.getSystemInfoSync()
			const windowWidth = sysInfo.windowWidth
			this.goodsHeight = ((windowWidth-70)/3).toFixed(2) + "px"
		}

	},
	methods: {
		seleGood() {
			
			this.goods.selected =!this.goods.selected;
			
			this.$emit('isChoose',this.goods)
		}
	}
};


</script>

<style lang="scss" scoped>
.limit-goods {
	
	.panel{
		width: 710rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		.select{
			width: 38rpx;
			height: 38rpx;
			margin: 0 22rpx 0 28rpx;
		}
		.goodImg {
			width: 160rpx;
			height: 160rpx;
			background: #F6F6F6;
			border-radius: 14rpx;
			margin-left: 20rpx;
			image {
				width:100%;
				height:100%;
			}
		}
		.goodInfo{
			width: 60%;
			margin-left: 24rpx;
			.g-1{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #191919;
				
				
			}
			
			.g-2{
				margin-top: 16rpx;
				view:nth-child(1){
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #E86748;
				}
				view:nth-child(2){
					margin: 0 20rpx;
					font-size: 22rpx;
					color: #8B959F;
				}
				view:nth-child(3){
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #8B959F;
				}
			}
			.g-3{
				margin-top: 16rpx;
				font-family: DINAlternate, DINAlternate;
				color: #F2270B;
				view{
					
					font-weight: bold;
					font-size: 40rpx;
					
					text{
					
						font-weight: 400;
						font-size: 20rpx;
						
					}
				}
				
			}
		}
		
	}
}
	
</style>
